<!-- page content-->
<div id="myVue" class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <v3>
                     vue Index Page
                </v3>
            </div>
        </div>
        <div class="clearfix"></div>
        <p>=================================</p>
        <h3>获取数据</h3>
        <p>name:{{user.name}}</p>
        <p>=================================</p>
        <h3>单向绑定数据</h3>
        <input type="text":value="user.name"/>
        <h3>双向绑定数据</h3>
        <input type="text" v-model:value="user.name"/>
        <input type="text" v-model="user.name">
        <p>=================================</p>
        <h3>循环绑定数据</h3>
        <select>
            <option v-for="(city,index) in cities" :value="city.cityId">{{city.cityName}}</option>
        </select>
        <table>
            <thead>
            <tr>
                <td>id</td>
                <td>name</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(city, index) in cities">
                <td>{{city.cityId}}</td>
                <td>{{city.cityName}}</td>
            </tr>
            </tbody>
        </table>
        <p>=================================</p>
        <h3>绑定事件</h3>
        <button @click="test_1()" value="test_1">test_1</button>
        <button id="test_2"  price="22.33" value="test_2" @click="test_2($even)">test_2</button>
        <p>============================</p>
        <h3>自定义模版</h3>
        <button-demo></button-demo>
        <button-count></button-count>
    </div>
</div>
<!-- /page content-->
<script>
    $(function (){
      test_1();
    });
    Vue.component("button-demo",{
        template:"<button>button-demo</button>>"
    });
    Vue.component("button-count",{
        data:function(){
            return {
                count:0,
            };
        },
        methods: {
            count_fun:function () {
                this.count +=1;
            },
        },
        template:"<button @click ='count_fun()'>{{count}}</button>",
    });

    var myVue =new Vue({
        el:"#myVue",
        data:{
            user:{
                name:"fengjin",
                age:18,
                gender:"male"
            },
            cities:[{
                cityId:"1",
                cityName:"chengdu"
            },
                {
                    cityId:"2",
                    cityName:"chongqin"
                }]
        },
        methods:{
            test_1:function (){
              console.log(this.user);
            },
            test_2:function (event){
                console.log(event);
                cosole.log(event.originalTarget);
                cosole.log(event.originalTarget.attributes.getNamedItem("price".name));
                cosole.log(event.originalTarget.attributes.getNamedItem("price".value));
            },
            initCities:function (){
                var countryId=522;
                var self=this;
                $.ajax({
                    url:"/api/cities/"+countryId,
                    type:"get",
                    success:function (rs){
                        self.cities=rs;
                    },
                    error:function (data){
                        layer.alert(data.responseText,{icon:0});
                    },
                });
            }

        },
        mounted:function (){
            this.initCities();
        },
        created:function (){
          window.test_1=this.test_1();
        },

    });
</script>